<template>
  <div class="infinite">
    <div class="card">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="50"
        >
          <van-row type="flex" justify="space-between">
            <van-col
              span="11"
              class="content"
              v-for="(item, i) in list"
              :key="i"
              @click="toDecoration(i)"
            >
              <img :src="`/img/${item.imageUrl}`"  alt=""/>
              <div>
                <span><van-icon name="fire-o" />{{ item.pvCount }}人在看</span>
              </div>
              <div>
                <span>{{ item.title }}</span
                >&nbsp;<span>| {{ item.region }}</span>
              </div>
              <div>
                <p>
                  {{ item.decorationForm }} | {{ item.room }}居 |
                  {{ item.stageName }}
                </p>
              </div>
            </van-col>
          </van-row>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"

import {get} from "../assets/js/config/api";

export default {
  name: "Infinite",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      params:{},
    };
  },
  methods: {
    ...mapMutations(["setshopId","setTitle","setimageUrl"]),

    onLoad() {
      let page = this.page++;
      this.params.category_id=1;
      this.params.page=page;

      if(this.refreshing){
        this.list=[];
        this.refreshing=false;

      }

      get('/articles',this.params)
        .then((result) => {

          this.list=[...this.list,...result.results]
          this.loading = false;
          if (page >= 8) {
            this.finished = true;
          }
        });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page=1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },



    toDecoration(i){
      this.setshopId(this.list[i].projectOrderId);
      this.setTitle(this.list[i].title);
      this.setimageUrl(this.list[i].imageUrl);
      this.$router.push({
        // path:`/decoration_inf/${this.list[i].projectOrderId}`
        path:`/details/${this.list[i].projectOrderId}`
      })
    }
  },
};
</script>

<style scoped lang="scss">
@import "../../public/sass/inf";
</style>
